<template>
  <div class="ruler">
    <svg-icon class="rule-panel-lock" type="editor-lock"></svg-icon>
    <SketchRule
      :width="width"
      :height="height"
      :perspective="perspectiveX"
      :layout="layoutX"
      :scale="scale"
      ref="horizontal"
    />
    <SketchRule
      mode="vertical"
      :width="width"
      :height="height"
      :perspective="perspectiveY"
      :layout="layoutY"
      :scale="scale"
      ref="vertical"
    />
    <slot name="container"></slot>
  </div>
</template>

<script>
import SketchRule from './components/SketchRule.vue'
export default {
  name: 'Ruler',
  props: {
    width: {
      type: Number
    },
    height: {
      type: Number
    },
    perspectiveX: {
      type: Number,
      default: 0
    },
    perspectiveY: {
      type: Number,
      default: 0
    },
    layoutX: {
      type: Array,
      default: () => []
    },
    layoutY: {
      type: Array,
      default: () => []
    },
    scale: {
      type: Number,
      default: 1
    }
  },
  components: {
    SketchRule
  },
  data () {
    return {
    }
  },
}
</script>

<style lang="less" scoped>
@import "../styles/vars.less";
@dark-raduis: rgba(lighten(@dark-color, 18.9% - lightness(@dark-color)), 0.64);
.ruler {
  position: relative;
  background-image: linear-gradient(90deg, @dark-color 14px, transparent 0),
    linear-gradient(0deg, transparent 14px, @dark-raduis 0);
  background-size: 17px 17px;
  background-position: 15px, 20px, 0, 0;
  width: 100%;
  overflow: hidden;
  .rule-panel-lock {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
}
</style>